import React, { useEffect, useState } from 'react'
import { Link, Outlet, useOutletContext, useNavigate } from 'react-router-dom'
import { Carousel } from 'antd'
import { fetchLanguagePacks, fetchHomeData } from '@/request'
import { defaultLanguage, defaultLanguageMap } from '@/const/mock'
import { NavList } from '@/router/const'
import OrderService from './OrderService'
import BoutiqueList from './BoutiqueList'
import './index.less'

function Page(props: any) {
  const { LG = {} } = useOutletContext()
  const [data, setData] = useState({})
  const navigate = useNavigate()

  const onTapNews = (item: INewItem) => {
    console.log('onTapNews', item)
    navigate(`detail/${item.id}`)
  }

  const load = async () => {
    const [homeData] = await Promise.all([fetchHomeData()])
    if (homeData) {
      const { section1, section2, section3, section4 } = homeData
      setData({ section1, section2, section3, section4 })
    }
  }

  useEffect(() => {
    load()
  }, [])

  const { section1 = [], section2 = [], section3 = [], section4 = {} } = data

  return (
    <>
      <div className='l-f'>
        <div className='section-one'>
          <Carousel autoplay={false} dots dotPosition='top'>
            {section1.map(item => (
              <div key={item.id} className='is-click-hand' onClick={() => onTapNews(item)}>
                <img src={item.thumbnailUrl} />
                <p className='title t-e-2'>{item.title}</p>
                <p className='author'>{item.tenantName}</p>
                <p className='time-desc'>{item.auditTime}</p>
              </div>
            ))}
          </Carousel>
        </div>
        <div className='section-line' />
        <div className='section-two l-f d-c jc-sb'>
          {section2.map(item => (
            <div key={item.id} className='is-click-hand' onClick={() => onTapNews(item)}>
              <img src={item.thumbnailUrl} />
              <p className='title t-e-2'>{item.title}</p>
              <p className='time-desc'>{item.auditTime}</p>
            </div>
          ))}
        </div>
        <div className='section-line' />
        <div className='section-three'>
          <p className='section-title'>{LG.burstNews}</p>
          {section3.map((item, ind) => (
            <div className='item l-f' key={item.id}>
              <div className='time-line l-f d-c ai-c'>
                <div className='time-line-dot' />
                {ind < section3.length - 1 ? <div className='time-line-line' /> : null}
              </div>
              <div className='is-click-hand' onClick={() => onTapNews(item)}>
                <p className='title t-e-2'>{item.title}</p>
                <p className='time-desc'>{item.auditTime}</p>
              </div>
            </div>
          ))}
          <div className='line' />
          <div className='section-four is-click-hand' onClick={() => onTapNews(section4)}>
            <img src={section4.thumbnailUrl} />
            <div className='cnt l-f d-c jc-sb'>
              <p className='fr-title t-e-2'>{section4.title}</p>
              <p className='fr-desc'>{section4.auditTime}</p>
            </div>
          </div>
        </div>
      </div>

      {/** 定制服务 */}
      <OrderService LG={LG} />

      {/** 精品片单 */}
      <BoutiqueList LG={LG} />
    </>
  )
}

export default Page
